<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>元素理解-行块级相互包裹(Element Understanding - Line Block Level Mutual Wrapping)</title>
  <!-- 
  一. 块级元素包裹行盒元素的理解： 
 
    1. **块级元素**：在网页布局中，块级元素会独占一行，宽度默认是100%。常见的块级元素包括 <div> 、 <p> 、 <h1> 等。 
    2. **行盒元素**：行盒元素是指在行级元素中生成的盒子，用于包裹行内元素。常见的行盒元素包括 <span> 、 <a> 等。 
    3. **包裹**：块级元素可以包裹行盒元素，即块级元素可以包含行内元素，从而形成一个整体的布局结构。 
    4. **布局**：通过合理地使用块级元素和行盒元素，可以实现复杂的网页布局结构，使页面内容清晰有序地排列。 

  二. 行盒是CSS中用来描述行内元素在垂直方向上的布局的概念。
  行盒中多种行内元素的一些常见说明： 
 
    1. **行内元素**：行内元素是指在文档流中按行排列的元素，例如 <span> 、 <a> 、 <strong> 等。它们不会独占一行，而是在同一行内按照文本流的方式排列。 
    
    2. **行盒**：行盒是围绕行内元素内容的矩形框，包括行高、行间距等属性。行内元素的内容会被包裹在行盒中，并根据行高和行间距进行布局。 
    
    3. **多种行内元素**：在行盒中可以包含多种不同的行内元素，它们按照文本流的顺序依次排列。每个行内元素都会在行盒中占据一定的空间，根据字体大小、行高等属性进行布局。 
    
    总结：行盒是围绕行内元素内容的矩形框，包括行高、行间距等属性。在行盒中可以包含多种不同的行内元素，它们按照文本流的顺序依次排列，并根据字体大小、行高等属性进行布局。

  三.行盒中内容的基线对齐是指行内元素中文本内容的基线在行内框中的对齐方式。
  行盒中内容的基线对齐的总结： 
 
    1. **基线**：基线是用于对齐文本字符底部的一条虚拟线，大多数字符的底部都与基线对齐。在CSS中，行内元素的基线通常用于垂直对齐文本内容。 
    
    2. **行内框**：行内框是包围行内元素内容的矩形框，包括文本内容、行高、行间距等属性。基线对齐会根据行内框的高度和基线位置来确定文本内容的垂直位置。 
    
    3. **基线对齐**：基线对齐是指行内元素中文本内容的基线与行内框中的基线对齐的方式。通过设置 vertical-align 属性可以控制文本内容相对于基线的垂直对齐方式，如 baseline 、 top 、 middle 、 bottom 等。 
    
    总结：行盒中内容的基线对齐是指行内元素中文本内容的基线在行内框中的对齐方式，通过设置 vertical-align 属性可以控制文本内容相对于基线的垂直对齐方式。基线对齐是CSS中用于垂直对齐文本内容的重要概念。

  四. 行内块级元素（inline-block）是CSS中的一种元素类型，具有行内元素和块级元素的特性。
  行内块级元素的总结： 
 
    1. **行内块级元素特性**： 
      - 行内块级元素可以在一行中显示，但是可以设置宽度和高度。 
      - 行内块级元素之间会有默认的空白间隙，可以通过设置 font-size: 0; 消除空白间隙。 
      - 行内块级元素可以设置 margin 、 padding 等外边距和内边距。 
      - 行内块级元素可以设置 text-align 属性来控制水平对齐方式。 
    
    2. **常见的行内块级元素**： 
      -  <span> 元素：默认为行内元素，通过设置 display: inline-block; 可以变为行内块级元素。 
      -  <img> 元素：图片元素是行内块级元素，可以设置宽度和高度。 
      -  <input> 元素：输入框元素是行内块级元素，可以设置宽度和高度。 
    
    3. **应用场景**： 
      - 适用于需要在一行中显示并具有宽度和高度控制的元素。 
      - 常用于创建水平导航栏、按钮组、图文混排等布局需求。 

  五.行内块级元素本身的文本居中是指在CSS中设置行内块级元素内部文本的水平和垂直居中。
  行内块级元素文本居中的总结： 
 
    1. **行内块级元素文本居中特性**： 
      - 行内块级元素的文本可以通过设置 text-align: center; 实现水平居中。 
      - 通过设置 line-height 属性等方式可以实现文本的垂直居中。 
      - 如果行内块级元素内部只有文本内容，可以通过设置 line-height 等属性实现文本的垂直居中。 
    
    2. **示例代码**：
    .inline-block {
          display: inline-block;
          text-align: center; /* 水平居中 */
          line-height: 100px; /* 垂直居中 */
      }
    3. **应用场景**： 
      - 适用于水平居中和垂直居中文本内容的行内块级元素。 
      - 常用于创建按钮、导航链接等需要文本居中显示的元素。 
    
    总结：通过设置 text-align: center; 实现行内块级元素文本的水平居中，通过设置 line-height 等属性实现文本的垂直居中。这种方式适用于需要在行内块级元素中居中显示文本内容的情况。
  -->
  <style>
    /* 
      block-container 没有设置高度会存在高度? 
      本质 - 高度由内容撑起来
    */
    .block-container {
      background-color: #f0f0f0;
    }

    .block-container img {
      width: 200px;
    }

    .block-container .inline-i {     
      display: inline-block;
      width: 200px;
      height: 110px;
      background-color: orange;
    }

    .block-container .inline-span {     
      display: inline-block;
      height: 90px;
      background-color: orange;
    }
  </style>
</head>
<body>

  <h3>1. 块级元素包裹行盒元素的理解</h3>
  <div class="block-container">
    块级元素包裹行盒元素的理解：
    <i class="inline-i"></i>
    1. **块级元素**：在网页布局中，块级元素会独占一行，宽度默认是100%。常见的块级元素包括 &lt;div> 、 &lt;p> 、 &lt;h1> 等。 
    2. **行盒元素**：行盒元素是指在行级元素中生成的盒子，用于包裹行内元素。常见的行盒元素包括 &lt;span> 、 &lt;a> 等。 
    3. **包裹**：块级元素可以包裹行盒元素，即块级元素可以包含行内元素，从而形成一个整体的布局结构。 
    4. **布局**：通过合理地使用块级元素和行盒元素，可以实现复杂的网页布局结构，使页面内容清晰有序地排列。 
  </div>

  <h3>2. 行盒中的多种行内元素</h3>
  <div class="block-container">
    行盒中的多种行内元素：xxxxxxxxxxxxxasdlkjh1234
    <img src="../../images/music_album01.jpg" alt="">
    <i class="inline-i"></i>
  </div>

  <h3>3. 行盒中内容的baseline(基线对齐)</h3>
  <div class="block-container">
    行盒中内容的baseline(基线对齐)：xxxxxxxxxxxxxasdlkjh1234
    <img src="../../images/music_album01.jpg" alt="">
    <i class="inline-i">vertical-align 属性可以控制文本内容相对于基线的垂直对齐方式，如 baseline 、 top 、 middle 、 bottom 等</i>
  </div>

  <h3>4. 行内块级元素的现象</h3>
  <div class="block-container">
    行内块级元素的现象：xxxxxxxxxxxxxasdlkjh1234

    <span class="inline-span">vertical-align 属性可以控制文本内容相对于基线的垂直对齐方式，如 baseline 、 top 、 middle 、 bottom 等</span>

  </div>

  <h3>5. 行内块元素本身的文本居中</h3>
  <div class="block-container">
    行内块元素本身的文本居中：xxxxxxxxxxxxxasdlkjh1234
  </div>
  
</body>
</html>